
<!--  -->
<template>
  <div class="edit-container-mainbox" v-if="dialogShow">
    <SetDesignDialog :title="'编辑'+ name " :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      :hasfooter="hasfooter" ref="settingDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="整体" name="1">
            <div class="grid-content bg-purple">
              <el-form :model="dConfig">
                <el-form-item label="显示设备" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                  <el-radio-group v-model="dConfig.deviceHidden">
                    <el-radio size="mini" :label="0">全部显示</el-radio>
                    <el-radio size="mini" :label="1">只电脑端显示</el-radio>
                    <el-radio size="mini" :label="2">只手机端显示</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="外层" name="2">
            <div class="grid-content bg-purple">
              <el-form :model="dOutside" @submit.native.prevent>
                <el-row>
                  <el-col :span="12">
                    <PaddingTopNoForm :title="'顶部内间距'" :defValue="dOutside.paddingTop" :chgValue="(d)=>{dOutside.paddingTop = d}" />
                  </el-col>
                  <el-col :span="12">
                    <PaddingBottomNoForm :title="'底部内间距'" :defValue="dOutside.paddingBottom" :chgValue="(d)=>{dOutside.paddingBottom = d}" />
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12" >
                    <el-form-item label="字体颜色" :label-width="formLabelWidth" style="height:41px;margin-bottom: 0px;">
                      <el-color-picker style="height:40px;" :disabled="dOutsideColor" v-model="dOutside.color">
                      </el-color-picker>
                      <el-checkbox v-model="dOutsideColor" style="top:-15px;">默认</el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="链接颜色" :label-width="formLabelWidth" style="height:41px;margin-bottom: 0px;">
                      <el-color-picker style="height:40px;" :disabled="dOutsideAColor" v-model="dOutside.atagColor">
                      </el-color-picker>
                      <el-checkbox v-model="dOutsideAColor" style="top:-15px;">默认</el-checkbox>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="动效" :label-width="formLabelWidth" style="margin-bottom:0px;">
                      <el-select style="width: 100px;" size="mini" v-model="dOutside.effect.theme" placeholder="请选择">
                        <el-option label="无" :value="-1"></el-option>
                        <el-option label="线条" :value="1"></el-option>
                        <el-option label="星空" :value="2"></el-option>
                        <el-option label="下雪" :value="3"></el-option>
                        <el-option label="波浪" :value="4"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="线条颜色" :label-width="formLabelWidth" style="height:41px;margin-bottom: 0px;" v-if="parseInt(dOutside.effect.theme) === 1">
                      <el-color-picker style="height:40px;" :disabled="dOutsideLinecolor" v-model="dOutside.effect.parame.linecolor">
                      </el-color-picker>
                      <el-checkbox v-model="dOutsideLinecolor" style="top:-15px;">默认</el-checkbox>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12" >
                    <el-form-item label="粒子数" :label-width="formLabelWidth" style="margin-bottom:0px;" v-if="parseInt(dOutside.effect.theme) === 1|| parseInt(dOutside.effect.theme) === 2 || parseInt(dOutside.effect.theme) === 3">
                      <el-input type="number" size="mini" style="width:100px;" :disabled="dOutsidePointnum > 0" v-model="dOutside.effect.parame.pointnum" min="0" max="200" @blur="pointnumLimit"
                        placeholder="模板默认"></el-input>
                      <el-checkbox v-model="dOutsidePointnum">默认</el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" >
                    <el-form-item label="粒子颜色" :label-width="formLabelWidth" style="height:41px;margin-bottom: 0px;" v-if="parseInt(dOutside.effect.theme) === 1|| parseInt(dOutside.effect.theme) === 2 || parseInt(dOutside.effect.theme) === 3 || parseInt(dOutside.effect.theme) === 4">
                      <el-color-picker style="height:40px;" :disabled="dOutsidePointcolor" v-model="dOutside.effect.parame.pointcolor">
                      </el-color-picker>
                      <el-checkbox v-model="dOutsidePointcolor" style="top:-15px;">默认</el-checkbox>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="背景" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                  <el-radio-group v-model="dOutside.background.type">
                    <el-radio size="mini" :label="0">无</el-radio>
                    <el-radio size="mini" :label="1">颜色</el-radio>
                    <el-radio size="mini" :label="2">图片</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item v-if="dOutside.background.type === 1" label="背景颜色" :label-width="formLabelWidth"
                  style="margin-bottom: 0px;">
                  <el-color-picker v-model="dOutside.background.color"></el-color-picker>
                </el-form-item>
                <el-row v-if="dOutside.background.type === 2">
                  <el-col :span="12">
                    <el-form-item label="背景图片" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                      <el-button @click.stop="chooseBackgroundImage(1)" type="success" size="mini">选择图片</el-button>
                      <div>
                        <div class="img-box-u">
                          <el-image @load="imageLoad" class="image-size-limit"
                            :src="dOutside.background.image.url">
                            <div slot="error" class="image-slot">
                              <span style="color:#656565;">图片不存在...</span>
                            </div>
                          </el-image>
                          <div class="delete-u" v-if="dOutside.background.image.url"><i @click.stop="deleteOutsideImage" class="el-icon-delete"></i></div>
                        </div>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="图片平铺模式" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                      <el-select size="mini" v-model="dOutside.background.image.repeat" placeholder="请选择">
                        <el-option label="仅显示一次且居中" :value="0"></el-option>
                        <el-option label="垂直方向和水平方向重复" :value="1"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="图片大小" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                      <el-select size="mini" v-model="dOutside.background.image.size" placeholder="请选择">
                        <el-option label="原图" :value="0"></el-option>
                        <el-option label="等比例放大" :value="1"></el-option>
                        <el-option label="等比例缩小" :value="2"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="图片固定" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                      <el-radio-group v-model="dOutside.background.image.fexid">
                        <el-radio size="mini" :label="0">滚动</el-radio>
                        <el-radio size="mini" :label="1">固定</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="内层" name="3">
            <div class="grid-content bg-purple">
              <el-form :model="dInside" @submit.native.prevent>
                <el-row>
                  <el-col :span="12">
                    <PaddingTopNoForm :title="'顶部内间距'" :defValue="dInside.paddingTop" :chgValue="(d)=>{dInside.paddingTop = d}" />
                  </el-col>
                  <el-col :span="12">
                    <PaddingBottomNoForm :title="'底部内间距'" :defValue="dInside.paddingBottom" :chgValue="(d)=>{dInside.paddingBottom = d}" />
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <PaddingLeftNoForm :title="'左边内间距'" :defValue="dInside.paddingLeft" :chgValue="(d)=>{dInside.paddingLeft = d}" />
                  </el-col>
                  <el-col :span="12">
                    <PaddingRightNoForm :title="'右边内间距'" :defValue="dInside.paddingRight" :chgValue="(d)=>{dInside.paddingRight = d}" />
                  </el-col>
                </el-row>
                <el-form-item label="宽度" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                  <el-input @blur="dInsideMaxWidthBlur" size="mini" style="width:80px;" :disabled="dInsideMaxWidth"
                    v-model="dInside.maxWidth" maxlength="12" placeholder="模板默认"></el-input>
                  <el-checkbox v-model="dInsideMaxWidth">默认</el-checkbox>
                  <span class="tip-color1">例如：100% </span>
                </el-form-item>
                <el-form-item label="背景" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                  <el-radio-group v-model="dInside.background.type">
                    <el-radio size="mini" :label="0">无</el-radio>
                    <el-radio size="mini" :label="1">颜色</el-radio>
                    <el-radio size="mini" :label="2">图片</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item v-if="dInside.background.type === 1" label="背景颜色" :label-width="formLabelWidth"
                  style="margin-bottom: 0px;">
                  <el-color-picker v-model="dInside.background.color.value"></el-color-picker>
                </el-form-item>
                <el-form-item v-if="dInside.background.type === 1" label="透明度" :label-width="formLabelWidth"
                  style="margin-bottom: 0px;">
                  <el-input size="mini" style="width:80px;" v-model="dInside.background.color.opacity" maxlength="12"
                    placeholder="1"></el-input>
                  <span class="tip-color1">例如：0.88 </span>
                </el-form-item>
                <el-row v-if="dInside.background.type === 2">
                  <el-col :span="12">
                    <el-form-item label="背景图片" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                      <el-button @click.stop="chooseBackgroundImage(2)" type="success" size="mini">选择图片</el-button>
                      <div>
                        <div class="img-box-u">
                          <el-image @load="imageLoad" class="image-size-limit"
                            :src="dInside.background.image.url">
                            <div slot="error" class="image-slot">
                              <span style="color:#656565;">图片不存在...</span>
                            </div>
                          </el-image>
                          <div class="delete-u" v-if="dInside.background.image.url"><i @click.stop="deleteInsideImage" class="el-icon-delete"></i></div>
                        </div>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="图片平铺模式" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                      <el-select size="mini" v-model="dInside.background.image.repeat" placeholder="请选择">
                        <el-option label="仅显示一次且居中" :value="0"></el-option>
                        <el-option label="垂直方向和水平方向重复" :value="1"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="图片大小" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                      <el-select size="mini" v-model="dInside.background.image.size" placeholder="请选择">
                        <el-option label="原图" :value="0"></el-option>
                        <el-option label="等比例放大" :value="1"></el-option>
                        <el-option label="等比例缩小" :value="2"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="图片固定" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                      <el-radio-group v-model="dInside.background.image.fexid">
                        <el-radio size="mini" :label="0">滚动</el-radio>
                        <el-radio size="mini" :label="1">固定</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="栅格" name="4">
            <div class="grid-content bg-purple cols-list">
              <el-table v-loading="loading" :data="bjContainerCols" height="314" @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseOut">
                <el-table-column label="序号" width="60" align="center">
                  <template slot-scope="scope">
                    {{scope.$index + 1}}
                  </template>
                </el-table-column>
                <el-table-column label="ID" align="center">
                  <template slot-scope="scope">
                    {{scope.row._other._tmpId}}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                  <template slot-scope="scope">
                    <i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow499':true, 'displayNo':isFirst(scope.$index)}" @click="clickUp(scope.$index, scope.row._other._tmpId)"></i>
                    <i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow505':true, 'displayNo':isLast(scope.$index)}" @click="clickDown(scope.$index, scope.row._other._tmpId)"></i>
                    <i class="el-icon-delete" @click="deleteCol(scope.row._other._tmpId)"></i>
                  </template>
                </el-table-column>
              </el-table>
              <div class="add-btn">
                <el-button @click="addCol" type="success" size="small">添加</el-button>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>
    <ChooseRepertory ref="chooseImage" />
    <DialogAddSpublicContainerCol ref="addContainerCol" :updateBjContainerCols = 'updateBjContainerCols'/>
  </div>
</template>

<script>
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import DialogAddSpublicContainerCol from '@/components/common/design/dialog/DialogAddSpublicContainerCol.vue'
import PaddingTopNoForm from '@/components/common/design/dialog/component/formitem/PaddingTopNoForm.vue'
import PaddingBottomNoForm from '@/components/common/design/dialog/component/formitem/PaddingBottomNoForm.vue'
import PaddingLeftNoForm from '@/components/common/design/dialog/component/formitem/PaddingLeftNoForm.vue'
import PaddingRightNoForm from '@/components/common/design/dialog/component/formitem/PaddingRightNoForm.vue'
import * as WindowType from '@/config/windowtype.js'
import * as functions from '@/core/functions.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import _ from 'lodash'
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState([
      'design'
    ]),
    isFirst () {
      return function (index) {
        if (index === 0) {
          return true
        } else {
          return false
        }
      }
    },
    isLast () {
      return function (index) {
        let len = this.bjContainerCols.length
        if (index === (len - 1)) {
          return true
        } else {
          return false
        }
      }
    }
  },
  created () {
    // 添加栅格
    /**
     * bjContainerMainbox 设置的主容器
     * bjContainerCols 对应主容器当中的子级栅格数据
     */
    VueFunctions.method(WindowType.EDIT_CONTAINER_MAINBOX, (bjContainerMainbox, bjContainerCols) => {
      this.bjContainerMainbox = bjContainerMainbox
      this.bjContainerCols = bjContainerCols
      this.close()
      this.dialogShow = true
      this.bjContainerMainbox = bjContainerMainbox
      this.bjContainerCols = bjContainerCols
      this.dConfig = JSON.parse(JSON.stringify(bjContainerMainbox.render.data.config))
      this.dInside = JSON.parse(JSON.stringify(bjContainerMainbox.render.data.inside))
      this.dOutside = JSON.parse(JSON.stringify(bjContainerMainbox.render.data.outside))
      this.dInside.background.type = !this.dInside.background.type ? 0 : this.dInside.background.type
      this.dOutside.background.type = !this.dOutside.background.type ? 0 : this.dOutside.background.type

      if (!this.dInside.maxWidth) {
        this.dInsideMaxWidth = true
      }

      if (!this.dOutside.color) {
        this.dOutsideColor = true
      }

      if (!this.dOutside.atagColor) {
        this.dOutsideAColor = true
      }

      if (!this.dOutside.effect.parame.pointnum) {
        this.dOutsidePointnum = true
      }

      if (!this.dOutside.effect.parame.pointcolor) {
        this.dOutsidePointcolor = true
      }

      if (!this.dOutside.effect.parame.linecolor) {
        this.dOutsideLinecolor = true
      }

      this.$nextTick(() => {
        this.$refs['settingDialog'].positionCenter()
      })
    })
  },
  data () {
    return {
      dialogShow: false,
      loading: false,
      name: '主容器',
      activeName: '1',
      hasfooter: true,
      // containerData: null,
      // data: null,
      formLabelWidth: '120px',
      // 控制是否默认
      dInsideMaxWidth: false,
      dOutsideColor: false,
      dOutsideAColor: false,
      dOutsidePointnum: false,
      dOutsidePointcolor: false,
      dOutsideLinecolor: false,
      // 传递过来的主内容弹窗数据
      bjContainerMainbox: null,
      // 传递过来的对应主容器当中的子级栅格数据
      bjContainerCols: null,
      // 资源数据
      // dRepertoryData: [],
      dConfig: {
        deviceHidden: 0
      },
      dInside: {},
      dOutside: {
      },
      callback: {
        save: () => { }
      },
      // 栅栏列表
      colList: null
    }
  },
  watch: {
    dInsideMaxWidth: {
      handler (newValue) {
        if (newValue === true) {
          this.dInside.maxWidth = null
        }
      },
      deep: true
    },
    dOutsideColor: {
      handler (newValue) {
        if (newValue === true) {
          this.dOutside.color = null
        }
      },
      deep: true
    },
    dOutsideAColor: {
      handler (newValue) {
        if (newValue === true) {
          this.dOutside.atagColor = ''
        }
      },
      deep: true
    },
    dOutsidePointnum: {
      handler (newValue) {
        if (newValue === true) {
          this.dOutside.effect.parame.pointnum = null
        }
      },
      deep: true
    },
    dOutsidePointcolor: {
      handler (newValue) {
        if (newValue === true) {
          this.dOutside.effect.parame.pointcolor = ''
        }
      },
      deep: true
    },
    dOutsideLinecolor: {
      handler (newValue) {
        if (newValue === true) {
          this.dOutside.effect.parame.linecolor = ''
        }
      },
      deep: true
    }
  },
  methods: {
    // 标签切换触发
    handleClick (tab, event) {
      if (tab.name === '4') {
        this.hasfooter = false
      } else {
        this.hasfooter = true
      }
    },
    // 粒子数最大限制
    pointnumLimit () {
      if (this.dOutside.effect.parame.pointnum > 200) {
        this.dOutside.effect.parame.pointnum = 200
      }
    },
    // 图片加载完成触发
    imageLoad () {
      this.$refs['settingDialog'].positionCenter()
    },
    // 选择图片
    chooseBackgroundImage (orderNum) {
      if (isNaN(orderNum) || parseInt(orderNum) < 1 || parseInt(orderNum) > 2) {
        return
      }
      orderNum = parseInt(orderNum)
      this.$refs['chooseImage'].show({ title: '选择' + orderNum === 1 ? '外层' : (orderNum === 2 ? '内层' : '') + '背景图片图片', max: 1, where: { type: [0, 4] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          repertoryList.forEach(item => {
            let src = functions.getRepertoryImageSrcByHostRepertory(item)
            if (orderNum === 1) {
              this.dOutside.background.image.url = src
              this.bjContainerMainbox._other.outsideImage.hrepertory = _.cloneDeep(item)
            } else {
              this.dInside.background.image.url = src
              this.bjContainerMainbox._other.insideImage.hrepertory = _.cloneDeep(item)
            }
          })
        }
      })
    },
    deleteOutsideImage () {
      this.dOutside.background.image.url = ''
      this.bjContainerMainbox._other.outsideImage.hrepertory = null
    },
    deleteInsideImage () {
      this.dInside.background.image.url = ''
      this.bjContainerMainbox._other.insideImage.hrepertory = null
    },
    dInsideMaxWidthBlur () {
      if (/^-?(\d|\.)+$/.test(this.dInside.maxWidth)) {
        this.dInside.maxWidth = parseInt(this.dInside.maxWidth) < 100 ? (this.dInside.maxWidth + '%') : (this.dInside.maxWidth + 'px')
      }
    },
    editorCol (tmpId) {

    },
    clickUp (index, tmpId) {
      if (!this.isFirst(index)) {
        let arrId = []
        this.bjContainerCols.forEach(el => {
          arrId.push(el._other._tmpId)
        })
        if (arrId.indexOf(tmpId) > -1) {
          let filterArr = this.bjContainerCols.splice(arrId.indexOf(tmpId), 1)
          this.bjContainerCols.splice(arrId.indexOf(tmpId) - 1, 0, filterArr[0])
          BackendjsFunctions.sortSpublicContainerCol(_.cloneDeep(this.bjContainerCols))
        }
      }
    },
    clickDown (index, tmpId) {
      if (!this.isLast(index)) {
        let arrId = []
        this.bjContainerCols.forEach(el => {
          arrId.push(el._other._tmpId)
        })
        if (arrId.indexOf(tmpId) > -1) {
          let filterArr = this.bjContainerCols.splice(arrId.indexOf(tmpId), 1)
          this.bjContainerCols.splice(arrId.indexOf(tmpId) + 1, 0, filterArr[0])
          BackendjsFunctions.sortSpublicContainerCol(_.cloneDeep(this.bjContainerCols))
        }
      }
    },
    deleteCol (tmpId) {
      // if (this.bjContainerCols.length > 1) {
      //   this.bjContainerCols.splice(index, 1)
      // } else {
      //   this.$message.error('栅格最少不能低于 1 个！')
      //   return
      // }
      let isdelete = BackendjsFunctions.isDelSpublicContainerCol(tmpId)
      if (isdelete) {
        let fellbackdata = BackendjsFunctions.delSpublicContainerCol(tmpId)
        this.bjContainerCols = _.cloneDeep(fellbackdata)
      }
    },
    addCol () {
      this.$refs['addContainerCol'].show(this.bjContainerMainbox._other._tmpId)
    },
    updateBjContainerCols (fellbackdata) {
      this.bjContainerCols = _.cloneDeep(fellbackdata)
    },
    handleMouseEnter (row, column, cell, event) {
      BackendjsFunctions.showShadowContainer(row._other._tmpId)
      BackendjsFunctions.scrollContainer(row._other._tmpId)
    },
    handleMouseOut (row, column, cell, event) {
      let hasTmpId = this.bjContainerCols.filter(item => {
        return item._other._tmpId === row._other._tmpId
      })
      if (hasTmpId.length > 0) {
        BackendjsFunctions.hideShadowContainer(row._other._tmpId)
      }
    },
    close () {
      this.dialogShow = false
      this.activeName = '1'
      this.hasfooter = true
      this.callback.save = () => { }
      this.dInsideMaxWidth = false
      this.dOutsideColor = false
      this.dOutsideAColor = false
      this.dOutsidePointnum = false
      this.dOutsidePointcolor = false
      this.dOutsideLinecolor = false
      this.bjContainerMainbox = null
      this.bjContainerCols = null
      this.dConfig = {}
      this.dInside = {}
      this.dOutside = {}
    },
    saveclose () {
      this.save()
      this.close()
    },
    save () {
      if (this.dOutsidePointnum || !this.dOutside.effect.parame.pointnum || this.dOutside.effect.parame.pointnum <= 0) {
        this.dOutside.effect.parame.pointnum = 0
      }
      this.bjContainerMainbox.render.data.config = this.dConfig
      this.bjContainerMainbox.render.data.inside = this.dInside
      this.bjContainerMainbox.render.data.outside = this.dOutside
      BackendjsFunctions.setSpublicContainerMainBox(_.cloneDeep(this.bjContainerMainbox))
      BackendjsFunctions.hideAllContainerCol()
    }
  },
  components: {
    SetDesignDialog,
    ChooseRepertory,
    DialogAddSpublicContainerCol,
    PaddingTopNoForm,
    PaddingBottomNoForm,
    PaddingLeftNoForm,
    PaddingRightNoForm
  }
}
</script>

<style scoped lang="scss">
.edit-container-u {
  width: 840px;
  min-height: 350px;
}
.add-btn {
  margin-top: 20px;
  text-align: right;
}
.image-size-limit /deep/ img{
  max-width: 280px;
  max-height: 180px;
}
.cols-list {
  /deep/ table th {
    color: #555;
    font-weight: normal;
  }
  i {
    font-size: 18px;
    cursor: pointer;
    margin:0 3px;
    &.iconfont{
      font-size: 20px;
    }
    &:hover {
      color: #258ffb;
    }
  }
  .displayNo {
    color: #888888;
    cursor: not-allowed;
    opacity: 0.5;
    &:hover {
      color: #888888;
    }
  }
}
.img-box-u{
  display: inline-block;
  position: relative;
  .delete-u{
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    background: #409EFF;
    color: #fff;
    text-align: right;
    font-size: 16px;
    padding: 0 6px;
    opacity: 0;
    cursor: pointer;
    line-height: 1.8;
  }
  &:hover .delete-u{
    opacity: 1;
  }
}
</style>
